// vim: set et sw=4 ts=4 sts=4 fdm=marker ff=unix fenc=utf8 nobomb:
/**
 * Popup UI
 *
 * @author mingcheng<i.feelinglucky@gmail.com>
 * @since  2009-11-17
 * @link   http://www.gracecode.com/
 */

~function() {
    var Util = YAHOO.util, Dom = Util.Dom, Event = Util.Event, Lang = YAHOO.lang;

    /**
     * 滚动栏目
     */
    var Channel = (function(containers, triggers, content) {
        var timer, anim, addons,
            currentClass = 'selected', lastSelectedIdx = false;

        var switchTo = function(idx, useAnim, onShow) {
            if (!containers[idx] || !triggers[idx]) {
                return;
            }

            var onShowEvent = new Util.CustomEvent("onShow", this);
            if (Lang.isFunction(onShow)) {
                onShowEvent.subscribe(onShow, this);
            }

            if (Lang.isFunction(addons)) {
                onShowEvent.subscribe(addons, this);
            }
            Dom.removeClass(triggers, currentClass);
            Dom.addClass(triggers[idx], currentClass);
            lastSelectedIdx = idx;
            onShowEvent.fire(); // fire event!

            var offset = 348 * idx; // ...
            if (typeof useAnim == 'undefined') useAnim = true;
            var attributes = {
               scroll: {to: [offset] }
            }; 
            if (anim) { anim.stop(); }
            anim = new Util.Scroll(content, attributes, 
                useAnim ? .3 : 0, Util.Easing.easeOutStrong); 
            anim.animate();
        };

        Dom.removeClass(triggers, currentClass);
        for(var i = 0, len = containers.length; i < len; i++) {
            ~function (idx) {
                Event.on(triggers[idx], 'click', function(e) {
                    Event.stopEvent(e);
                    switchTo(idx);
                });
            }(i);
        };

         return {
            getCurrentIdx: function() {return lastSelectedIdx;},
            triggers: triggers,
            containers: containers,
            switchTo: switchTo,
            setSwitchToCall: function(callback) {
                if (Lang.isFunction(callback)) {
                    addons = callback;
                }
            },
            getAll: function() {
                return {
                    containers: containers,
                    triggers: triggers
                };
            }
         }
     })(Dom.getElementsByClassName('tweets', 'ul', 'content'),
        Dom.get('channel').getElementsByTagName('li'),
        Dom.get('content'));

    /**
     * 提示信息
     */
    var Notice = (function(noticeEl) {
        var anim;
        Dom.addClass(noticeEl, 'hidden');
        return {
            show: function(message, delay, onShow) {
                var _self = this, delay = delay || 2;
                noticeEl.innerHTML = '<span>' + message + '</span>';
                Dom.removeClass(noticeEl, 'hidden');

                var onShowEvent = new Util.CustomEvent("onShow", this);
                if (Lang.isFunction(onShow)) {
                    onShowEvent.subscribe(onShow, this);
                }

                var attributes = {
                    opacity: {from: 1, to: 0}
                }; 
                if (anim) { anim.stop(); }
                anim = new Util.Anim(noticeEl, attributes, delay); 
                anim.onComplete.subscribe(function() {
                    Dom.setStyle(noticeEl, 'opacity', '1');
                    onShowEvent.fire();
                    _self.hide();
                });
                anim.animate();
            },

            hide: function(onHide) {
                Dom.addClass(noticeEl, 'hidden');
                if (Lang.isFunction(onHide)) {
                    var onHideEvent = new Util.CustomEvent("onHide", this);
                    onHideEvent.subscribe(onHide, this);
                    onHideEvent.fire();
                }
            }
        }
    })(Dom.get('notice'));

    /**
     * “载入中”层
     */
    var Loading = (function(loadingEl) {
        var anim;
        Dom.addClass(loadingEl, 'hidden');

        var $show = function(onShow) {
            Dom.removeClass(loadingEl, 'hidden');
            if (Lang.isFunction(onShow)) {
                var onShowEvent = new Util.CustomEvent("onShow", this);
                onShowEvent.subscribe(onShow, this);
                onShowEvent.fire();
            }
        };


        var $hide = function(onHide, useAnim) {
            var _self = this, attributes = {
                opacity: {to: 0}
            };

            var onHideEvent = new Util.CustomEvent("onHide", _self);
            if (Lang.isFunction(onHide)) {
                onHideEvent.subscribe(onHide, _self);
            }

            if (Lang.isUndefined(useAnim)) {
                useAnim = true;
            }

            if (useAnim) {
                if (anim) { anim.stop(); }
                anim = new Util.Anim(loadingEl, attributes, .5); 
                anim.onComplete.subscribe(function() {
                    Dom.setStyle(loadingEl, 'opacity', '1');
                    Dom.addClass(loadingEl, 'hidden');
                    onHideEvent.fire();
                });
                anim.animate();
            } else {
                Dom.setStyle(loadingEl, 'opacity', '1');
                Dom.addClass(loadingEl, 'hidden');
                onHideEvent.fire();
            }
        };

        return {
            showMini: function(onShow) {
                Dom.addClass(loadingEl, 'loading-mini');
                $show(onShow);
            },

            hideMini: function(onHide, useAnim) {
                Dom.addClass(loadingEl, 'loading-mini');
                $hide(onHide, useAnim);
            },

            show: function(onShow) {
                Dom.removeClass(loadingEl, 'loading-mini');
                $show(onShow);
            },

            hide: function(onHide, useAnim) {
                Dom.removeClass(loadingEl, 'loading-mini');
                $hide(onHide, useAnim);
            }
        }
    })(Dom.get('loading'));

    /**
     * 输入框界面逻辑
     */
    var InputArea = (function(textarea, status) {
        var TWEETS_MAX_LENGTH = 140;
        var $check = function() {
            status.innerHTML = TWEETS_MAX_LENGTH - Lang.trim(textarea.value).length;
            if (Lang.trim(textarea.value).length > TWEETS_MAX_LENGTH) {
                Dom.addClass(textarea, 'full');
                Dom.setStyle(status, 'color', 'red');
                return false;
            } else {
                Dom.removeClass(textarea, 'full');
                Dom.setStyle(status, 'color', '');
                return true;
            }
        };

        Event.on(textarea, 'keydown', function(e) {
            status.innerHTML = TWEETS_MAX_LENGTH - Lang.trim(textarea.value).length;
            $check();
        });
        
        return {
            getValue: function() {
                return Lang.trim(textarea.value);
            },
            setValue: function(value, cursorAtEnd, trim) {
                cursorAtEnd = Lang.isUndefined(cursorAtEnd) ? true : !!cursorAtEnd;
                if (Lang.isUndefined(trim)) trim = true;
                textarea.value = trim ? Lang.trim(value) : value;
                //...
            },
            focus: function() {
            
            },
            check: $check
        };
    })(Dom.get('form:input'), Dom.get('form:status'));


    var Status = (function(statusEl) {
        //statusEl.innerHTML = '';
        return {
            setValue: function(message) {
                statusEl.innerHTML = message;
            },

            getValue: function(message) {
                return statusEl.innerHTML;
            }
        };
    })(Dom.get('status'));

    // 合并到全局空间
    window.UI = {
        Channel: Channel, Notice: Notice, Loading: Loading, Status: Status, InputArea: InputArea
    };
}();
